<template>
  <div class="cn-editor-wrapper" @click="updateBlocks([])">
    <cn-page-block v-if="pageBlock" :block="pageBlock" />
  </div>
</template>

<script lang="ts" setup>
import { PropType, toRefs } from 'vue';
import { type CnBlock } from './types';
import CnPageBlock from './block/cn-page-block.vue';

const emit = defineEmits<{
  'update:blocks': [blocks: Array<CnBlock>];
}>();

const props = defineProps({
  blocks: {
    type: Array as PropType<Array<CnBlock>>,
    required: true,
  },
});
const { blocks } = toRefs(props);

const pageBlock = computed(() => {
  if (!blocks.value || blocks.value.length < 1) {
    return null;
  }
  const pageBlock_ = blocks.value[0];
  return pageBlock_.type == 1 ? pageBlock_ : null;
});

const updateBlocks = (blocks: Array<CnBlock>) => {
  emit('update:blocks', blocks);
};
</script>
